<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link href="/styles/mall/index.css" rel="stylesheet">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div th:replace="common/competition-common::mall-header"></div>
<div th:replace="common/competition-common::competition-sidebar"></div>
<div class="mall-body" style="margin-right: 50px">
    <div class="pagetitle" th:if="${matches.getStatecompetition() == 0}">
        <h1 th:style="'color:red;'">未发布</h1>
    </div>
    <div class="pagetitle" th:if="${matches.getStatecompetition() == 1}">
        <h1 th:style="'color:green;'">已发布</h1>
    </div>
    <div class="carousel slide home-banner" id="homeBanner">
        <form action="/competition/reg" id="competitionForm" method="post">
            <input id="shipping-address-id" name="cid" type="hidden" value=""/>
            <div class="modal-body">
                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" >赛事图片</label>
                        <img th:src="${matches.getPoster()}" width="1300" height="500"  class="goods-image"/>
                    </div>
<!--                    <div class="col-md-2"></div> &lt;!&ndash; 增加空白列 &ndash;&gt;-->
                </div>
                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="raceBelongsEvent">比赛所属赛事</label>
                        <input class="form-control" id="raceBelongsEvent" name="province" readonly
                               th:value="${competitions.getComname()}">
                        <input class="form-control" name="matchid" readonly th:value="${matches.getMatchid()}"
                               type="hidden">
                        <input class="form-control" name="comid" readonly th:value="${competitions.getComid()}"
                               type="hidden">
                        <div class="invalid-feedback" id="raceBelongsEventError"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="startdate">比赛开始时间</label>
                        <input class="form-control" id="startdate" name="startdate" readonly
                               th:value="${#dates.format(matches.getStartdate(), 'yyyy-MM-dd')}"
                               type="date">
                        <div class="invalid-feedback" id="startdateError"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="enddate">比赛结束时间</label>
                        <input class="form-control" id="enddate" name="enddate" readonly
                               th:value="${#dates.format(matches.getEnddate(), 'yyyy-MM-dd')}"
                               type="date">
                        <div class="invalid-feedback" id="enddateError"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="finaldate">决赛时间</label>
                        <input class="form-control" id="finaldate" name="finaldate" readonly
                               th:value="${#dates.format(matches.getFinaldate(), 'yyyy-MM-dd')}"
                               type="date">
                        <div class="invalid-feedback" id="finaldateError"></div>
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="joindeadline">报名截止时间</label>
                        <input class="form-control" id="joindeadline" name="joindeadline" readonly
                               th:value="${#dates.format(matches.getJoindeadline(), 'yyyy-MM-dd')}"
                               type="date">
                        <div class="invalid-feedback" id="joindeadlineError"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="sponsorCorporateContact">赞助企业联络人</label>
                        <input class="form-control" id="sponsorCorporateContact" name="sponsorcontact" readonly
                               th:value="${matches.getSponsorcontact()}">
                        <div class="invalid-feedback" id="sponsorCorporateContactError"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="courseManager">课程负责人</label>
                        <input class="form-control" id="courseManager" name="courseleader" readonly
                               th:value="${matches.getCourseleader()}">
                        <div class="invalid-feedback" id="courseManagerError"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="qualityTeacher">素质教师</label>
                        <input class="form-control" id="qualityTeacher" name="gradeinstructor" readonly
                               th:value="${matches.getGradeinstructor()}">
                        <div class="invalid-feedback" id="qualityTeacherError"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="standardForEvaluation">评分标准</label>
                        <input class="form-control" id="standardForEvaluation" name="scoringcriteria" readonly
                               th:value="${matches.getScoringcriteria()}">
                        <div class="invalid-feedback" id="standardForEvaluationError"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="refereeInformation">裁判信息</label>
                        <input class="form-control" id="refereeInformation" name="enterprisejudges" readonly
                               th:value="${matches.getEnterprisejudges()}">
                        <div class="invalid-feedback" id="refereeInformationError"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="finalVenue">决赛地点</label>
                        <input class="form-control" id="finalVenue" name="finallocation" readonly
                               th:value="${matches.getFinallocation()}">
                        <div class="invalid-feedback" id="finalVenueError"></div>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="form-group col-md-5">
                        <label class="col-form-label" for="competitionPrizeDescription">赛事奖品说明</label>
                        <input class="form-control" id="competitionPrizeDescription" name="awardintroduction" readonly
                               th:value="${matches.getAwardintroduction()}">
                        <div class="invalid-feedback" id="competitionPrizeDescriptionError"></div>
                    </div>
                </div>

            </div>
            <div class="col-12" th:if="${ok eq '1'}">
                <button class="btn btn-primary w-100">报名比赛</button>
            </div>
        </form>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>


<script>
    $(document).ready(function () {
        $('form').on('submit', function (e) {
            var valid = true;
            var startDate = new Date($('#startdate').val());
            var endDate = new Date($('#enddate').val());
            var finalDate = new Date($('#finaldate').val());
            var joindeadline = new Date($('#joindeadline').val());

            // 清空之前的错误消息
            $('.invalid-feedback').text('');

            if (startDate > endDate) {
                $('#enddateError').text("比赛结束时间不能在比赛开始时间之前！").show();
                valid = false;
            }

            if (finalDate < startDate || finalDate > endDate) {
                $('#finaldateError').text("决赛时间必须在比赛开始和结束时间之间！").show();
                valid = false;
            }
            if (joindeadline >= startDate) {
                $('#joindeadlineError').text("报名截止日期必须在比赛开始之前！").show();
                valid = false;
            }

            if (!valid) {
                e.preventDefault();
            }
        });
    });
</script>
</body>
</html>
